<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户-角色树形显示</title>
    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="/hmp/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/hmp/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/hmp/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="/hmp/css/animate.css" rel="stylesheet">
    <link href="/hmp/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox-content">
					<div id="deptTree"></div>
				</div>
				<div class="form-group hidden">
					<div class="col-sm-12 col-sm-offset-12">
						<button type="submit" class="btn btn-primary">提交</button>
					</div>
				</div>
			</div>
		</div>
	</div>
    <script src="/hmp/js/jquery.min.js?v=2.1.4"></script>
    <!-- jsTree plugin javascript -->
    <script src="/hmp/js/plugins/jsTree/jstree.min.js"></script>
    <script src="/hmp/layui/layui/layui.js"></script>
 <script type="text/javascript">
		$(document).ready(function() {
			getTreeData()
		});
		function getTreeData() {
			$.ajax({
				type : "GET",
				url : "/role/tree",
				success : function(tree) {
					loadTree(tree);
				}
			});
		}
		//jsTree里面的写法  
		function loadTree(tree) {
			$('#deptTree').jstree({
				'core' : {
					'data' : tree
				},
				"plugins" : [ "search" ]
			});
			$('#deptTree').jstree().open_all();
		}
		layui.use(['form','layer'], function(){
			
			$('#deptTree').on("changed.jstree", function(e, data) {
					if(data.node.id!=1){
						//调用 父级的js 方法  很管用  
						parent.loadDept(data.node.id,data.node.text);
						var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
						parent.layer.close(index);
					}else
					{
						parent.layer.alert("这个角色您不能选择!");
					}
					
			});
			
		});
	</script>
</body>

</html>
